<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>编辑流程</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="<%=request.getContextPath() %>/js/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>

<!--
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow.js"></script>
-->
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/Base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/Config.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/util.js"></script>

<!-- resizer -->
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/Resizer.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/ResizerPath.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/ResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/LeftTopResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/LeftResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/LeftBottomResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/TopResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/BottomResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/RightTopResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/RightResizerPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/resizer/RightBottomResizerPoint.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/FlowNode.js"></script>

<!-- path -->
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/point/PathPointStrategy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/point/PathFromPointStrategy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/point/PathToPointStrategy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/point/PathBigPointStrategy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/point/PathSmallPointStrategy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/PathLinePoints.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/PathPoint.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/PathText.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/PathLine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/PathArrow.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/path/Path.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/ArkFlow.js"></script>

<script type="text/javascript">
    window.ArkFlowContextPath = "<%=request.getContextPath() %>/js/arkflow/";
</script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arkflow/jpdl/arkflow.jpdl4.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/pages/workflow/PropertyEditor.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/pages/workflow/editor/TextEditor.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/pages/workflow/editor/InputEditor.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/pages/workflow/editor/SelectEditor.js"></script>

<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="<%=request.getContextPath() %>/jQuery/ui/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/main.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/layout.css" rel="stylesheet" />
<link href="<%=request.getContextPath() %>/new_css/default/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var data,workflowName;
$(document).ready(function() {  
    $(":button").button();   
    $("#dialog:ui-dialog").dialog("destroy");
  	$("#mytable" ).dialog({
			autoOpen: false,
			height: 400,
			width:550,
			modal: true,
			resizable:false,
			title:"设置节点审批人",
			close: function() {
		  	  
			}
		});
  	if($("#workflowdata").val()==""){
             data="";
  	  }else{
         data= eval("("+$("#workflowdata").val()+")");
  	  }
  	workflowName = $("#workflowName").val();
  });
	$(function() {
		$('#arkflow')
				.arkflow(
						{
							  flowName:workflowName,
							  restore :data,
						    basePath : "",
							  tools : {
								save : {
									onclick : function(data) {
							  var json = data;
							  var obj = eval("("+data+")");
						    var statesCount =0;
						    var pathCount=0;
							  $.each(obj.states,function(idx,item){
							  	statesCount++;
							  	});
							  $.each(obj.paths,function(idx,item){
							  	pathCount++;
							  	});
						  	if(statesCount>pathCount+1){
							  	alert("请正常设置流程！");
							  	return;
						  	}
							  var num=json.indexOf("type:'start'");
							  var endNum=json.indexOf("type:'end'");
							  var msg="";
							  if(num==-1){
                   msg+="请设置开始节点!"+"\n";
								}
							  if(endNum==-1){
								  msg+="请设置结束节点!"+"\n";
							   }
							   if(msg!=""){
                      alert(msg);
                     return false;
								}
								
						$.ajax({
				              type : "POST",
				              url : "workflowAjax!editWorkflow.action?isEdit=1&workflowData=" + data,
				              dataType : "json",
				              error : function(XMLHttpRequest, textStatus, errorThrown) {				    	 				
				    	 					var data = XMLHttpRequest.responseText;					    	  			
				    	  				alert(data);
				     					},
					          success : function(data, textStatus) {
				     						var json = eval(data);				     						
				     						if(json.f=='s'){
					     						$("#data").val(json.workflowData);
					     						deleteRows();

					     					 	var option="";
 					     						for (j = 0; j < json.roleList.length; j++){
 					     							option+="<option value='"+json.roleList[j].roleId+"'>"+json.roleList[j].roleName +"</option>";
 						     					}
					     						var fromTable = document.getElementById("flowForm");
					     						var decisionTable = document.getElementById("flowDecision");
					     						var formCount=0;
					     						var decisionCount=0;	
					     									     					
					     						for (i = 0; i < json.flowList.length; i++) {						     				
						     						if(json.flowList[i].type=="decision"){
						     							decisionCount++;
						     							var row = decisionTable.insertRow(decisionCount);
						     							var col = row.insertCell(0);
						     							col.innerHTML =json.flowList[i].name;
						     							col = row.insertCell(1);
						     							var html="<input type=\"text\" name=\"flowList["+i+"].expr\" value='"+json.flowList[i].expr+"' style=\"width: 350px\"/>";	
						     							html = html+"<input type=\"hidden\" name=\"flowList["+i+"].name\" value='"+json.flowList[i].name+"'/>";		 
						     							col.innerHTML = html;						     							
						     						}
						     						else{						     						
						     							formCount++;
						     							var row = fromTable.insertRow(formCount);
						     							var col = row.insertCell(0);
						     							col.innerHTML =json.flowList[i].name;
						     							col = row.insertCell(1);
						     							var html="<input type='text' name='flowList["+i+"].form' value='"+json.flowList[i].form+"'/>";
						     							html = html+"<input type=\"hidden\" name=\"flowList["+i+"].name\" value='"+json.flowList[i].name+"'/>";		
						     							html = html+"<input type=\"hidden\" value='flowList["+i+"].assignType'/>";		    						
						     							col.innerHTML = html;
						     							col = row.insertCell(2);
						     							var htm="<input name=\"flowList["+i+"].assignType\" type=\"radio\" value=\"0\" onclick=\"show("+i+",2)\"/>角色";
															htm=htm+"<input name=\"flowList["+i+"].assignType\" type=\"radio\"  value=\"1\" onclick=\"show("+i+",3)\" checked=\"checked\"/>用户";
															htm=htm+"<input name=\"flowList["+i+"].assignType\" type=\"radio\"  value=\"2\" onclick=\"show("+i+",4)\"/>发起人";
						                             	col.innerHTML=htm;
						                             	col = row.insertCell(3);                            
						                                var Inputhtm="<select style=\"display:none;width:100px;\" id =\""+i+"j\" name=\"flowList["+i+"].assignValue\">" +option+"</select>";
						                                Inputhtm=Inputhtm+"<input id =\""+i+"y\" style=\"width:100px;\"  type=\"text\"  name=\"flowList["+i+"].assignee\" value='"+json.flowList[i].assignee+"'/>";
						                                col.innerHTML=Inputhtm;					
						     				     }
					     						}
					     						if(decisionCount>0){
														$("#flowDecision").attr("style","display:inline");
					     						}
					     						else{
					     							$("#flowDecision").attr("style","display:none");
					     						}
					     						$("#mytable").dialog("open");
					     					}
				     						else{
					     						alert(json.m);
				     						}
				     					}});									
									}
								}
							}
						});
	});
	function show(i,flag){
		var num=i+1;//i:radioId,num:selectID和inputID
		//flag:2,角色;3,用户
		if(flag==2){
			//下拉宽显示
			document.getElementById(i+"j").style.display="block"
		    document.getElementById(i+"y").style.display="none"
		}else if(flag==3){
			document.getElementById(i+"y").style.display="block"
			document.getElementById(i+"j").style.display="none"
		}else if(flag==4){
		    document.getElementById(i+"y").style.display="none"
			document.getElementById(i+"j").style.display="none"
		}
		
	}
	function deleteRows(){
		var oTable = document.getElementById("flowForm");//源		
		for(var i=oTable.rows.length; i>1;i--){	
			oTable.deleteRow(1);
		}
		var flowDecisionTable = document.getElementById("flowDecision");//源		
		
		for(var i=flowDecisionTable.rows.length; i>1;i--){	
			flowDecisionTable.deleteRow(1);
		}
	}
	function getRadioValue(radioName)
	{
	    var radios = document.getElementsByName(radioName);
	    if(!radios) 
	        return '';
	    for (var i = 0; i < radios.length; i++) 
	    {
	        if (radios[i].checked) 
	            return radios[i].value;
	    }
	   return '';
	}
	function checkAndDataHandle() {
			//根据执行内容，验证table内容是否为空，用于向后台提交
			var oTable = document.getElementById("flowForm");//源
			var bTable=document.getElementById("flowDecision");
			var msg="";			
			for (var i = 1; i < oTable.rows.length; i++) {
			   var form=oTable.rows[i].cells[1].childNodes[0].value;	
			   var nodeName=oTable.rows[i].cells[1].childNodes[1].value;	
			   var assigneeTypeName=oTable.rows[i].cells[1].childNodes[2].value;
			   var assigneeType =getRadioValue(assigneeTypeName);
	      
	           var assignee=oTable.rows[i].cells[3].childNodes[1].value;
		       if(assigneeType=='0'){
		      	 assignee =oTable.rows[i].cells[3].childNodes[0].value;
		       }
			  if(form==null||form==""){
		          msg+="第"+i+"行,节点：【"+nodeName+"】的【页面内容】不可为空"+"\n";
		       }
			  if(assigneeType!='2'){
				 if(assignee==null||assignee==""){
			          msg+="第"+i+"行,节点：【"+nodeName+"】的【审批人】不可为空"+"\n";
			       }
			  }
			}	
			for (var i = 1; i < bTable.rows.length; i++) {
			  var nodeName=bTable.rows[i].cells[1].childNodes[1].value;	
       		  var epr=bTable.rows[i].cells[1].childNodes[0].value;
     	  if(epr==null||epr==""){
            msg+="第"+i+"行,节点：【"+nodeName+"】的条件值不可为空"+"\n";
        }
			}	
		return msg;
	}

	function save(){			
		var msg=checkAndDataHandle();	
		if(msg!=""){
			alert(msg);
			return false;
	    }
   // alert(decodeURIComponent($("#form").serialize(),true));
    //return;
		 $.ajax({
	         type : "POST",
	         url : "workflowAjax!saveFlow.action?workflowData=" + $("#data").val(),
	         data: $("#form").serialize(),
	         dataType : "json",
	         error : function() {},
	         success : function(data, textStatus) {
				var json = eval(data);
	           if (json.f='s') {
	               alert("保存成功");
	               $("#mytable").dialog("close");
	               this.location.href="workflow!initAddWorkFlowPage.do";
	             } else {		             
	               alert("保存失败:"+json.m);
	           }
	         }
	   });		
	}
</script>
<style type="text/css">
body {
	margin: 0;
	pading: 0;
	text-align: left;
	font-family: Arial, sans-serif, Helvetica, Tahoma;
	font-size: 12px;
	line-height: 1.5;
	color: black;
	background-image: url(<%=request.getContextPath() %>/js/arkflow/resource/bg.png);
}

.node {
	width: 70px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #fff;
}

.mover {
	border: 1px solid #ddd;
	background-color: #ddd;
}

.selected {
	background-color: #ddd;
}

.state {
	
}

#arkflow_props table {
	
}

#arkflow_props th {
	letter-spacing: 2px;
	text-align: left;
	padding: 6px;
	background: #ddd;
}

#arkflow_props td {
	background: #fff;
	padding: 6px;
}

#pointer {
	background-repeat: no-repeat;
	background-position: center;
}

#path {
	background-repeat: no-repeat;
	background-position: center;
}

#task {
	background-repeat: no-repeat;
	background-position: center;
}

#state {
	background-repeat: no-repeat;
	background-position: center;
}
#flowForm ,#flowDecision{
  text-align: center;
}
</style>
</head>
<body>
<div id="arkflow_tools"
		style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;"
		class="ui-widget-content">
<div id="arkflow_tools_handle" style="text-align: center;" class="ui-widget-header">工具集</div>


<div class="node" id="arkflow_save"><img src="<%=request.getContextPath() %>/js/arkflow/resource/save.gif" />&nbsp;&nbsp;保存</div>
<div>
<hr />
</div>
<div class="node selectable" id="pointer"><img src="<%=request.getContextPath() %>/js/arkflow/resource/select16.gif" />&nbsp;&nbsp;选择</div>
<div class="node selectable" id="path"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/flow_sequence.png" />&nbsp;&nbsp;转换</div>
<div>
<hr />
</div>
<div class="node state" id="start" type="start"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/start_event_empty.png" />&nbsp;&nbsp;开始</div>
<div class="node state" id="state" type="state" style="display: none;"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/task_empty.png" />&nbsp;&nbsp;状态</div>
<div class="node state" id="task" type="task"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/task_empty.png" />&nbsp;&nbsp;任务</div>
<div class="node state" id="decision" type="decision"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/gateway_parallel.png" />&nbsp;&nbsp;判断</div>
<div class="node state" id="fork" type="fork" style="display: none;"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/gateway_parallel.png" />&nbsp;&nbsp;分支</div>
<div class="node state" id="join" type="join" style="display: none;"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/gateway_parallel.png" />&nbsp;&nbsp;合并</div>
<div class="node state" id="end" type="end"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/end_event_terminate.png" />&nbsp;&nbsp;结束</div>
<div class="node state" id="end-cancel" type="end-cancel" style="display: none;"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/end_event_cancel.png" />&nbsp;&nbsp;取消</div>
<div class="node state" id="end-error" type="end-error" style="display: none;"><img src="<%=request.getContextPath() %>/js/arkflow/resource/16/end_event_error.png" />&nbsp;&nbsp;错误</div>
</div>

<div id="arkflow_props"
		style="position: absolute; top: 30; right: 50; background-color: #fff; width: 220px; padding: 3px;"
		class="ui-widget-content">
<div id="arkflow_props_handle" class="ui-widget-header">属性</div>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
		<tr>
				<td></td>
		</tr>
		<tr>
				<td></td>
		</tr>
</table>
<div>&nbsp;</div>

</div>

<div id="arkflow">
<input type="hidden" name="bizFlow.workflowDescribe" 
value="<s:property value="bizFlow.workflowDescribe"/>" id="workflowdata"/>
<input type="hidden" value="<s:property value="bizFlow.workflowName"/>" id="workflowName"/>
</div>
<div id="mytable">
<input type="hidden" id="data">
  <form id="form">
     <table align="left"  id="flowForm" style="width: auto;">
        <tr>
          <th style="width: 100px;" >节点</th>
          <th style="width: 100px;" >页面</th>
          <th style="width: 250px;">选择</th>
          <th style="width: 100px;">审批人</th>
        </tr>
     </table>
     <table align="left" id="flowDecision" width="450px" style="display: none;">
        <tr>
          <th style="width: 100px;" >节点</th>
          <th style="width: 350px;" >条件</th>
        </tr>
     </table>
     <table align="left" width="450px">
        <tr>
          <td colspan="3" style="text-align: center"><input type="button" value="提交" onclick="save();"/> </td>
        </tr>
        
     </table>
  </form>
</div>
</body>
</html>
